import React, { PureComponent, Fragment } from 'react';
import { Route, Redirect, Switch, routerRedux } from 'dva/router';
import { Card, Steps } from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import NotFound from '../../Exception/404';
import { getRoutes } from '../../../utils/utils';
import styles from '../style.less';

const { Step } = Steps;

export default class StepForm extends PureComponent {
  getCurrentStep = () => {
    const { location } = this.props;
    const { pathname } = location;
    const pathList = pathname.split('/');
    switch (pathList[pathList.length - 1]) {
      case 'info':
        return 0;
      case 'confirm':
        return 1;
      case 'result':
        return 2;
      default:
        return 0;
    }
  };

  gotoStep = step => {
    const { dispatch, location } = this.props;
    const pathArray = location.pathname.split('/');

    const id = pathArray[3];
    dispatch(routerRedux.push(`/badminton/detail/${id}/${step}`));
  };

  render() {
    const { match, routerData, location } = this.props;
    return (
      <PageHeaderLayout tabActiveKey={location.pathname}>
        <Card bordered={false}>
          <Fragment>
            <Steps current={this.getCurrentStep()} className={styles.steps}>
              <Step title="比赛信息" onClick={() => this.gotoStep('info')} />
              <Step title="分组信息" onClick={() => this.gotoStep('fenzu')} />
              <Step title="报名信息" onClick={() => this.gotoStep('signInfo')} />
              <Step title="参赛信息" onClick={() => this.gotoStep('cansai')} />
              <Step title="抽签" onClick={() => this.gotoStep('chouqian')} />
              <Step title="成绩" onClick={() => this.gotoStep('score')} />
            </Steps>
            <Switch>
              {getRoutes(match.path, routerData).map(item => {
                //console.log(match);
                return (
                  <Route
                    key={item.key}
                    path={item.path}
                    component={item.component}
                    exact={item.exact}
                  />
                );
              })}
              <Redirect exact from="/badminton/detail/:id" to="/badminton/detail/:id/info" />
              <Route render={NotFound} />
            </Switch>
          </Fragment>
        </Card>
      </PageHeaderLayout>
    );
  }
}
